<template>
  <div id="corBrand">
      <div class="bg">
          <img src="@/assets/01/font.jpg" style="width:100%;height:100%;left:0;position:absolute;top:0;left:0" alt="">
          <img src="@/assets/01/font.jpg" style="width:100%;height:100%;left:-100%;position:absolute;top:0" alt="">
      </div>
      <div class="title_nav">
          <div>合作品牌</div>
          <span>/ COOPERATION BRAND</span>
      </div>
      <div class="brand_nav">
          <div class="item" v-for="(item,index) in list" :style="{'height':item.size+'px','width':item.size+'px',top:item.top+'px',left:item.left+'px','box-shadow':'30px '+(item.size-20)+'px 20px -20px #ededed'}" :key="index">
              <div id="item">
                  <img :src="item.icon" alt="">
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import '@/assets/css/corBrand.css'
export default {
  name: 'corBrand',
  data () {
    return {
        list:[{
            icon:require('@/assets/01/05/a5-01.jpg'),
            top:0,
            left:30,
            size:110
        },{
            icon:require('@/assets/01/05/a5-02.jpg'),
            top:30,
            left:230,
            size:80
        },{
            icon:require('@/assets/01/05/a5-03.jpg'),
            top:100,
            left:380,
            size:120
        },{
            icon:require('@/assets/01/05/a5-04.jpg'),
            top:10,
            left:580,
            size:100
        },{
            icon:require('@/assets/01/05/a5-05.jpg'),
            top:0,
            left:760,
            size:80
        },{
            icon:require('@/assets/01/05/a5-06.jpg'),
            top:170,
            left:0,
            size:80
        },{
            icon:require('@/assets/01/05/a5-07.jpg'),
            top:220,
            left:190,
            size:90
        },{
            icon:require('@/assets/01/05/a5-08.jpg'),
            top:220,
            left:620,
            size:90
        },{
            icon:require('@/assets/01/05/a5-09.jpg'),
            top:180,
            left:780,
            size:100
        }]
    }
  }
  
}
</script>
<style scoped>

</style>